<template>
  <div class="three-box"></div>
</template>

<script setup>
import {
  Scene,
  WebGLRenderer,
  PerspectiveCamera,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh,
  AxesHelper
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { onMounted } from "vue";
import gsap from "gsap";

const renderer = new WebGLRenderer();

onMounted(() => {
  const dom = document.querySelector(".three-box");
  console.log("dom======>", dom, dom.offsetWidth, dom.offsetHeight);
  renderer.setSize(dom.offsetWidth, dom.offsetHeight);

  dom.appendChild(renderer.domElement);

  const camera = new PerspectiveCamera(
    45,
    dom.offsetWidth / dom.offsetHeight,
    1,
    500
  );

  // camera.position.set( 0, 0, 100 );
  // camera.lookAt( 0, 0, 0 );

  const scene = new Scene();

  const axesHelper = new AxesHelper(5);

  scene.add(axesHelper);

  const controls = new OrbitControls(camera, renderer.domElement);

  const geometry = new BoxGeometry(1, 1, 1);
  const material = new MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 10;

  controls.update();

  gsap.to(cube.position, { x: 5, duration: 5, repeat: 5, yoyo: true });

  // renderer.render( scene, camera );
  function animate() {
    requestAnimationFrame(animate);

    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
    controls.update();

    renderer.render(scene, camera);
  }

  animate();
});
</script>

<style lang="less" scoped>
.three-box {
  width: 100%;
  height: 100vh;
}
</style>
